<template>
  <el-pagination
      @size-change="handleLimitChange"
      @current-change="handlePageChange"
      :total="total"
      :page-size="limit_"
      :current-page="page_"
      :page-sizes="pageSizes"
      layout="total, sizes, prev, pager, next, jumper">
  </el-pagination>
</template>

<script>
/* eslint-disable */
/**
 * 分页字段名配置
 */
const pageField = 'page';
const limitField = 'limit';

/**
 * 分页配置
 *
 * 按照事件的方式，重新封装分页组件，更方便使用分页。
 * 后台分页相关的查询，大部分都是通过这个组件调用的；
 * 与此相关的组件：data-table/list-view
 */
export default {
    name: "SeaPagination"
    , props: {
        // 页号
        page: {type: Number, default: 1}
        // 每一页容量
        , limit: {type: Number, default: 10}
        // 数据总量
        , total: {type: Number}
        // 分页变化侦听
        , change: {type: Function}
        // 页号
        , pageSizes: {type: Array, default: () => [10, 20, 50, 100]}
    }
    , data() {
        //对大部分参数做一次备份，因为Vue参数是不允许修改的，而组件内部会触发很多分页参数的变化
        return {
            //页号
            page_: this.page
            //行数
            , limit_: this.limit
        }
    }, watch: {
        /**
         * 页号的变化，会触发页面查询
         */
        page: {
            handler: function (newValue) {
                this.page_ = newValue;
                this.triggerChange()
            }
        }
        /**
         * 分页容量变化，会触发页面查询
         */
        , limit: {
            handler: function (newValue) {
                this.limit_ = newValue;
                this.triggerChange()
            }
        }
    }
    , methods: {
        /**
         * 组件内部页码发生变化
         *
         * @params page 页号配置
         */
        handlePageChange(page) {
            this.page_ = page;
            this.triggerChange();
        },
        /**
         * 组件内部分页数发生变化
         *
         * @params limit 页数
         */
        handleLimitChange(limit) {
            this.limit_ = limit;
            this.triggerChange();
        },
        /**
         * 分页变化事件
         */
        triggerChange: function () {
            let ret = {};
            ret[pageField] = this.page_;
            ret[limitField] = this.limit_;
            if(this.change !== undefined){
                this.change(ret);
            }
        }
    }
}
</script>
